@import url(http://fonts.googleapis.com/css?family=Droid+Sans+TV:regular,bold&subset=latin);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);

/**
 * Styles to replicate the look/feel of Google TV Spotlight
 */
body {
  background-color: #000;
  color: #f0f0f0;
  font-family: 'Droid Sans', arial, serif;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
ul,
li,
p {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
.center {
  margin: 0 auto;
  width: 1050px;
}
.horiz-spacer {
  width: 150px;
}

#header {
  background-color: #444;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4D4D4D), to(#3A3A3A));
  height: 62px;
}
#header img {
  float: left;
  padding-top: 8px;
}
#header h2 {
  color: #fff;
  float: left;
  font-family: 'Droid Sans TV', 'Droid Sans', arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  margin: 19px 0 0 18px;
  text-shadow: #222 0px 1px 3px;
}


#colorstrip {
  clear: both;
  height: 5px;
}
#colorstrip li {
  float: left;
  height: 5px;
  width: 25%;
}
#colorstrip .col1 {
  background: #E3182D;
}
#colorstrip .col2 {
  background: #0087F7;
}
#colorstrip .col3 {
  background: #00BD27;
}
#colorstrip .col4 {
  background: #FFDF00;
}

/*** Top parent container Spotlight apps tv-grid ***/
#main-grid {
  background: #000;
  height: 470px;
  margin: 0 auto;
  overflow: hidden;
  padding: 25px 15px;
  width: 1020px;
  white-space: nowrap;
}
#main-grid ul {
  color: #aaa;
  font-size: 14px;
}
#main-grid li {
  height: 250px;
  width: 240px;
  white-space: normal;
}
#main-grid .tv-link {
  border: 1px solid #676767;
  border-radius: 4px;
}
#main-grid h3 {
  color: #f0f0f0;
  font-size: 20px;
  margin: 5px 0;
}


/*** For Spotlight vertical scrolling UI ***/
#main-grid ul.tv-container-horizontal {
  clear: both;
}
#main-grid ul.tv-container-horizontal li {
  display: inline-block;
  margin: 0 15px 0 0;
}

/*** For Spotlight horizontal scrolling UI ***/
#main-grid ul.tv-container-vertical {
  display: inline-block;
  margin: 0 15px 0 0;
  white-space: normal;
}
#main-grid ul.tv-container-vertical li {
  margin: 0;
}
